---
title: "Line chart"
description: "Line charts are ideal for showing data trends across time. They work great for continuous data and help identify patterns quickly."
order: 1
published: true
references: ["https://recharts.org/en-US/api/LineChart"]
---

## Basic

Line charts are great for showing trends, comparisons, and patterns over time. They keep your data clean and easy to read.
<How className="w-full max-w-xl" toUse="visualizations/line-chart/line-chart-demo" />

## Installation

```bash
npx shadcn@latest add @intentui/recharts
```

## Composed components

<Composed components={['chart']}/>

## Manual installation

```bash
npm i recharts'
```

<SourceCode toShow={'line-chart'} />

## Stacked

Stacked line charts show how parts make up a whole. Ideal when you want to compare multiple categories and still keep track of the total.
<How className="w-full max-w-xl" toUse="visualizations/line-chart/line-chart-stacked-demo" />

## Monotone

Monotone charts use a smooth curve for a cleaner look. Good when you only need to show one metric clearly without visual clutter.
<How className="w-full max-w-xl" toUse="visualizations/line-chart/line-chart-monotone-demo" />

## Custom format

Customize the look of your chart to match your design system. You can change colors, styles, and anything else that matters for your UI.
<How className="w-full max-w-xl" toUse="visualizations/line-chart/line-chart-custom-format-demo" />

## Custom tooltip

Add context when users hover. Custom tooltips let you show extra info like icons, units, or anything else that makes your data easier to read.
<How className="w-full max-w-xl" toUse="visualizations/line-chart/line-chart-custom-tooltip-demo" />

## Custom legend

Replace the default legend with something more useful. Add icons, labels, or even interactions to better explain what’s on the chart.
<How className="w-full max-w-xl" toUse="visualizations/line-chart/line-chart-custom-legend-demo" />

## Custom colors
Customize the colors of your line chart to match your brand or design system. This helps maintain visual consistency across your application.
<How className="w-full max-w-xl" toUse="visualizations/line-chart/line-chart-custom-colors-demo" />

## Controlled

Manage the chart fully with state. Use this to sync with other UI, switch datasets, or respond to user interactions programmatically.
<How className="w-full max-w-xl" toUse="visualizations/line-chart/line-chart-controlled-demo" />
